{% load cache %}
{% cache 120 "dev_stories" category user %}
<div id="dev-stories">
    <div class="dev_header">Top News</div>
    <div class="dev-stories-list">
        {% for dev_item in dev_items %}
            <div class="dev_stories_container">
                <div class="message_time">{{ dev_item.created|date:"H:i" }}</div>
                <div class="item_image">
                    {% if chapter %}
                        <a href="{% url item_filter chapter dev_item.slug %}">
                    {% else %}
                        <a href="{{ dev_item.get_absolute_url }}">
                    {% endif %}
                    {% with image=dev_item.get_small_image %}
                        {% if image %}
                            <img src="{{ image }}"/>
                        {% else %}
                            <img src="{{ STATIC_URL }}images/no-image-Square.png"/>
                        {% endif %}
                    {% endwith %}
                    {% if not dev_item.slumped %}
                        <span class="item_status" title="Live"></span>
                    {% endif %}
                    </a>
                </div>
                <div class="item_message">
                    <div class="message">
                        {% if chapter %}
                            <a href="{% url item_filter chapter dev_item.slug %}">{{ dev_item.message }}</a>
                        {% else %}
                            <a href="{{ dev_item.get_absolute_url }}">{{ dev_item.message }}</a>
                        {% endif %}
                        <span class="item_user">{{ dev_item.location.name }}</span>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="dev_footer">
        <a href="/live/">More popular news<span class="icon_read_more"></span></a>
    </div>
</div>

{%  endcache %}

{% cache 3600 "top_broadcasters" user %}
<div id="top_broadcasters">
    <div class="dev_header">Top Users</div>
    <div class="dev-stories-list">
        {% for broadcaster in broadcasters %}
            {% load ordering %}
            <div class="broadcaster_container">
                <div class="broadcaster_avatar">
                    <a href="{{ broadcaster.get_absolute_url }}">
                        {% if broadcaster.avatar %}
                            <img src="{{ broadcaster.avatar.url }}">
                        {% else %}
                            <img src="{{ STATIC_URL }}/images/default.jpg">
                        {% endif %}
                        {%  if broadcaster.live_current %}
                            <span class="item_status_count" title="Live items"></span>
                        {%  endif %}
                    </a>
                </div>
                <div class="broadcaster_name">
                    <a href="{{ broadcaster.get_absolute_url }}">{{ broadcaster.get_username }}</a>
                    {% if user != broadcaster %}
                        <div class="broadcaster_follow">
                            {% include "broadcaster.html" %}
                        </div>
                    {% endif %}
                </div>
                <div class="broadcaster_activity">
                    {% for record in broadcaster.positions %}
                        <span class="bar_container">
                            <span class="bar" style="height:{{ record.percent }}%;">
                                <span class="activity_date" style="display:none;">
                                    {{ record.date|date:"l, F j" }}th
                                    <div class="activity_date_pointer"></div>
                                </span>
                            </span>
                        </span>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="broadcast_footer"></div>
</div>
{% endcache %}
